<template>
    <Editor :value="value" :plugins="plugins" @change="handleChange" />
    <a-button type="primary" @click="handlePreview">Preview</a-button>
  </template>
  
  <script setup lang="ts">
  import gfm from "@bytemd/plugin-gfm";
  import highlight from "@bytemd/plugin-highlight";
  import { Editor, Viewer } from "@bytemd/vue-next";
  import { ref } from "vue";
  import 'bytemd/dist/index.css'
  
  const plugins = [
    gfm(),
    highlight(),
    // Add more plugins here
  ];
  
  const value = ref("");
  
  const handleChange = (v: string) => {
    console.log("change", v);
    value.value = v;
  };

  const handlePreview = () => {

    console.log(value);
  };
  </script>
  
  <style scoped></style>
  